<template>
	<view>
		<!--<z-nav-bar>停课申请</z-nav-bar>-->
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<view class="list">
			<view class="classCard">
				<view class="tip tip-tongguo">
					<text>通过</text>
				</view>
				<view class="header">
					<text>VIP协议班</text>
				</view>
				<view class="list-row">
					<view class="row">
						<text>开始时间</text>
						<text class="value">4月20日</text>
					</view>
					<view class="row">
						<text>结束时间</text>
						<text class="value">上午</text>
					</view>
					<view class="row">
						<text>请假事由</text>
						<text class="value">吃饭</text>
					</view>
				</view>
			</view>
			<view class="classCard">
				<view class="tip tip-bohui">
					<text>驳回</text>
				</view>
				<view class="header">
					<text>VIP协议班</text>
				</view>
				<view class="list-row">
					<view class="row">
						<text>开始时间</text>
						<text class="value">4月20日</text>
					</view>
					<view class="row">
						<text>结束时间</text>
						<text class="value">上午</text>
					</view>
					<view class="row">
						<text>请假事由</text>
						<text class="value">吃饭</text>
					</view>
				</view>
			</view>
			<view class="classCard">
				<view class="tip tip-shenhezhong">
					<text>审核中</text>
				</view>
				<view class="header">
					<text>VIP协议班</text>
				</view>
				<view class="list-row">
				<view class="row">
					<text>开始时间</text>
					<text class="value">4月20日</text>
				</view>
				<view class="row">
					<text>结束时间</text>
					<text class="value">上午</text>
				</view>
				<view class="row">
					<text>请假事由</text>
					<text class="value">吃饭</text>
				</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<navigator class="btn" url='/subpages/my/newSuspendClass'><button type="primary">新增停课申请</button></navigator>
			<!-- <button type="primary" class="btn" @click="submitForm">新增停课申请</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				checked: false,
				radio: 1,
				noticeText: '当前班别剩余选班次数2次'
			};
		},
		computed: {

		},
		onLoad(e) {

		},
		onShow() {

		},
		//方法
		methods: {
			radioChange() {
				this.checked = !this.checked
				if (this.checked) {
					uni.showModal({
						title: '提示',
						content: '开课前N天内不可修改哦',
						cancelText: '确认',
						confirmText: '我再看看',
						cancelColor: '#81B435',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击取消按钮');
								this.checked = !this.checked
							} else if (res.cancel) {	
								uni.showToast({
									title: "选班成功",
									icon: "success"
								});
							}
						}
					});
				}
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss">
	@import '@/style/mixin.scss';

	page {
		background-color: $uni-bg-color-grey;
	}

	.blue-box {
		height: 150vh;
		background-color: red;
	}
	.list {
		margin-bottom: 115px;
	}
	.classCard {
		margin: 16px auto;
		width: 686upx;
		padding: 21px 22px;
		background: #FEFFFF;
		border-radius: 16px;
		position: relative;
		&::before {
			content: "";
			width: 32px;
			height: 3px;
			background: #F5F5F5;
			background-size: 100%;
			position: absolute;
			top: 49px;
			left: 25px;
		}
		.tip {
			height: 32px;
			width: 78px;
			text-align: center;
			position: absolute;
			background: #81B435;
			background-color: rgba(129, 180, 53, 0.1);
			right: 25px;
			top: 0;
			border-radius: 0px 0px 16px 16px;
			font-family: PingFangSC;
			font-size: 15px;
			line-height: 30px;
			color: #81B435;
		}
		.tip-bohui {
			color: #EB5757;
			background-color: rgba(235, 87, 87, 0.1);
		}
		.tip-shenhezhong {
			color: #F2994A;
			background-color: rgba(242, 153, 74, 0.1);
		}
		.tip-tongguo {
			color: #81B435;
			background-color: rgba(129, 180, 53, 0.1);
		}
		.header {
			height: 17px;
			line-height: 17px;
			font-family: PingFangSC;
			font-size: 17px;
			color: #323233;
			text {
				margin-left: 24upx;
			}

			.personNum {
				text-align: center;
				font-size: 11px;
				line-height: 11px;
				color: #FFFFFF;
				background: #81B435;
				padding: 2px 10px;
				border-radius: 11px;
			}
		}
		.list-row {
			margin-top: 23px;
		}
		.row {
			margin-left: 26px;
			color: #969696;
			font-size: 15px;
			line-height: 30px;

			text {
				margin-right: 20px
			}
			.value {
				font-family: PingFangSC;
				font-size: 15px;
				line-height: 30px;
				color: #4F4F4F;
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		height: 99px;
		width: 100%;
		background: #fff;
		.btn {
			margin: 8px 16px;
			background: #81B435;
			height: 49px;
			color: #fff;
			font-size: 16px;
		}
	}
</style>
